<template>
<!-- 达人分析 5 28 -->
  <div id="analysis">
    <template v-if="vipRootObj[5][28].owner">
      <div class="aysBox1">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="../../../../../assets/wang/tdetails/dataimg.png" alt="" />
            <span>数据概况</span>
          </div>
          <radio_group01
            v-model="dataTime"
            class="mr_16"
            :radio_values="['近7天', '30天']"
          />
        </div>
        <div class="theDataBox">
          <!-- <div class="theDataItem">
            <p>{{ format_num(dataViewArr.videoIncr) }}</p>
            <p>作品增量</p>
          </div> -->
          <div class="theDataItem">
            <p>{{ format_num(dataViewArr.fansIncr) }}</p>
            <p>粉丝增量</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataViewArr.favoriteIncr) }}</p>
            <p>新增点赞</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataViewArr.commentIncr) }}</p>
            <p>新增评论</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataViewArr.shareIncr) }}</p>
            <p>新增转发</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataViewArr.liveIncr) }}</p>
            <p>新增直播</p>
          </div>
        </div>
      </div>
      <div class="aysBox2">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="../../../../../assets/wang/tdetails/fans.png" alt="" />
            <span>粉丝趋势</span>
          </div>
          <radio_group01
            v-model="fansTime"
            class="mr_16"
            :radio_values="['近7天', '30天']"
          />
        </div>
        <Category
          :xData="fansXdata"
          :y1Data="fansY1data"
          :y2Data="fansY2data"
          name1="增量"
          name2="总量"
          formatter="1"
          v-if="finishFans"
        />
        <div
          v-loading="!finishFans"
          v-if="!finishFans"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
      <div class="aysBox2">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="../../../../../assets/wang/tdetails/zan.png" alt="" />
            <span>点赞趋势</span>
          </div>
          <radio_group01
            v-model="zanTime"
            class="mr_16"
            :radio_values="['近7天', '30天']"
          />
        </div>
        <Category
          :xData="zanXdata"
          :y1Data="zanY1data"
          :y2Data="zanY2data"
          name1="增量"
          name2="总量"
          formatter="1"
          v-if="finishZan"
        />
        <div
          v-loading="!finishZan"
          v-if="!finishZan"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
      <div class="aysBox2">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="../../../../../assets/wang/tdetails/comment.png" alt="" />
            <span>评论趋势</span>
          </div>
          <radio_group01
            v-model="commentTime"
            class="mr_16"
            :radio_values="['近7天', '30天']"
          />
        </div>
        <Category
          :xData="ComentXdata"
          :y1Data="ComentY1data"
          :y2Data="ComentY2data"
          name1="增量"
          name2="总量"
          formatter="1"
          v-if="finishComent"
        />
        <div
          v-loading="!finishComent"
          v-if="!finishComent"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
      <div class="aysBox2">
        <div class="chartTitle">
          <div class="titleBox">
            <img
              src="../../../../../assets/wang/tdetails/commentWord.png"
              alt=""
            />
            <span>评论词云</span>
          </div>
        </div>
        <div class="wordBox">
          <WordCloud
            :wordData="wordData"
            :sizeRange="[24, 50]"
            v-if="showWord && wordData.length != 0"
          />
          <div
            v-loading="!showWord"
            v-if="!showWord"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div v-if="showWord && wordData.length == 0" class="noDataNotice">
            目前没有可以查看的数据哟~
          </div>
        </div>
      </div>
      <div class="aysBox2">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="../../../../../assets/wang/tdetails/worksNum.png" alt="" />
            <span>近30天作品分析</span>
          </div>
        </div>
        <Category
          :xData="AlysXdata"
          :y1Data="AlysY1data"
          :y2Data="AlysY2data"
          name1="点赞量"
          name2="评论量"
          formatter="1"
          v-if="finishAlys"
        />
        <div
          v-loading="!finishAlys"
          v-if="!finishAlys"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
    </template>
    <!-- 优化后的示例图 -->
    <div v-else class="notVipBoxNewWl">
      <!-- <img :src="$global.staticUrl + 'image/egImg/audience.jpg'" alt="" class="egBgImg" /> -->
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
      >
        <div class="dialogEg">
          <payVip routerName="audience" :lowestVipNum="vipRootObj[5][28].ownerMinLevel" />
        </div>
      </el-dialog>
    </div>    
  </div>
</template>

<script>
import radio_group01 from "../../../../../component/radio_group01";
import Category from "./Category";
import WordCloud from "./WordCloud";
export default {
  components: {
    radio_group01,
    Category,
    WordCloud,
  },
  data() {
    return {
      dataTime: "近7天",
      fansTime: "近7天",
      zanTime: "近7天",
      commentTime: "近7天",
      wordData: [],
      showWord: false,
      dataViewArr: {},
      // 粉丝趋势
      finishFans: false,
      fansXdata: [],
      fansY1data: [],
      fansY2data: [],
      // 点赞趋势
      finishZan: false,
      zanXdata: [],
      zanY1data: [],
      zanY2data: [],
      // 评论趋势
      finishComent: false,
      ComentXdata: [],
      ComentY1data: [],
      ComentY2data: [],
      // 作品分析
      finishAlys: false,
      AlysXdata: [],
      AlysY1data: [],
      AlysY2data: [],
      // 取消之前未响应的请求
      cancel1: null,
      cancel2: null,
      cancel3: null,
      cancel4: null,
      cancel5: null,
      cancel6: null,
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    };
  },
  computed: {},
  watch: {
    // 数据概况时间
    dataTime: function (newVal, oldVal) {
      this.GetDataOverViewByTime();
    },
    // 粉丝趋势时间
    fansTime: function (newVal, oldVal) {
      this.finishFans = false;
      this.GetFansData();
    },
    // 点赞趋势时间
    zanTime: function (newVal, oldVal) {
      this.finishZan = false;
      this.GetZanData();
    },
    // 评论趋势时间
    commentTime: function (newVal, oldVal) {
      this.finishComent = false;
      this.GetComentData();
    },
  },
  created() {
    if(this.vipRootObj[5][28].owner){
      this.GetDataOverViewByTime();
      this.GetFansData();
      this.GetZanData();
      this.GetComentData();
      this.GetAnalysisData();
      this.GetComWordCloud();
    }
  },
  methods: {
    // 数据概况
    GetDataOverViewByTime() {
      let that = this;
      let timeType = 1;
      if (that.dataTime == "近7天") {
        timeType = 1;
      } else if (that.dataTime == "30天") {
        timeType = 2;
      } else if (that.dataTime == "90天") {
        timeType = 3;
      }
      that.$axios
        .get(
          "/api/author/GetDataOverViewByTime",
          {
            params: {
              timeType: timeType,
              // authorId: "106073884943",
              authorId: that.$route.params.id,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel1 != null) {
                that.cancel1();
              }
              that.cancel1 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.dataViewArr = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 粉丝趋势
    GetFansData() {
      let that = this;
      let timeType = 1;
      if (that.fansTime == "近7天") {
        timeType = 1;
      } else if (that.fansTime == "30天") {
        timeType = 2;
      } else if (that.fansTime == "90天") {
        timeType = 3;
      }
      that.$axios
        .get(
          "/api/author/GetAuthorTrend",
          {
            params: {
              timeType: timeType,
              authorId: that.$route.params.id,
              trendType: 1,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel2 != null) {
                that.cancel2();
              }
              that.cancel2 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.fansXdata = []; //切换时间时清空之前的
            let Xdata = res.data.data.dates;
            that.fansY1data = res.data.data.datas1; //增量
            that.fansY2data = res.data.data.datas2; //总量
            Xdata.forEach((element) => {
              that.fansXdata.push(that.timestamp(element, "M/D"));
              return that.fansXdata;
            });
            that.finishFans = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点赞趋势
    GetZanData() {
      let that = this;
      let timeType = 1;
      if (that.zanTime == "近7天") {
        timeType = 1;
      } else if (that.zanTime == "30天") {
        timeType = 2;
      } else if (that.zanTime == "90天") {
        timeType = 3;
      }
      that.$axios
        .get(
          "/api/author/GetAuthorTrend",
          {
            params: {
              timeType: timeType,
              authorId: that.$route.params.id,
              trendType: 2,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel3 != null) {
                that.cancel3();
              }
              that.cancel3 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.zanXdata = [];
            let Xdata = res.data.data.dates;
            that.zanY1data = res.data.data.datas1; //增量
            that.zanY2data = res.data.data.datas2; //总量
            Xdata.forEach((element) => {
              that.zanXdata.push(that.timestamp(element, "M/D"));
              return that.zanXdata;
            });
            that.finishZan = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 评论趋势
    GetComentData() {
      let that = this;
      let timeType = 1;
      if (that.commentTime == "近7天") {
        timeType = 1;
      } else if (that.commentTime == "30天") {
        timeType = 2;
      } else if (that.commentTime == "90天") {
        timeType = 3;
      }
      that.$axios
        .get(
          "/api/author/GetAuthorTrend",
          {
            params: {
              timeType: timeType,
              authorId: that.$route.params.id,
              trendType: 3,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel4 != null) {
                that.cancel4();
              }
              that.cancel4 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.ComentXdata = [];
            let Xdata = res.data.data.dates;
            that.ComentY1data = res.data.data.datas1; //增量
            that.ComentY2data = res.data.data.datas2; //总量
            Xdata.forEach((element) => {
              that.ComentXdata.push(that.timestamp(element, "M/D"));
              return that.ComentXdata;
            });
            that.finishComent = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 词云
    GetComWordCloud() {
      let that = this;
      that.$axios
        .get(
          "/api/author/GetComWordCloud",
          {
            params: {
              // authorId: "1",
              authorId: that.$route.params.id,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel5 != null) {
                that.cancel5();
              }
              that.cancel5 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.wordData = res.data.data;
            that.showWord = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 作品分析
    GetAnalysisData() {
      let that = this;
      let timeType = 1;
      that.$axios
        .get(
          "/api/author/GetAuthorTrend",
          {
            params: {
              timeType: 2,
              authorId: that.$route.params.id,
              trendType: 4,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel6 != null) {
                that.cancel6();
              }
              that.cancel6 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.AlysXdata = [];
            let Xdata = res.data.data.dates;
            that.AlysY1data = res.data.data.datas1; //增量
            that.AlysY2data = res.data.data.datas2; //总量
            Xdata.forEach((element) => {
              that.AlysXdata.push(that.timestamp(element, "M/D"));
              return that.AlysXdata;
            });
            that.finishAlys = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang='less' scoped>
// 达人分析
#analysis {
  width: 100%;
  .chartTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 44px;
    .titleBox {
      img {
        margin-left: 0;
      }
    }
  }

  // 数据概况
  .aysBox1 {
    width: 100%;
    .theDataBox {
      width: 100%;
      height: 140px;
      background-color: #ffffff;
      border: solid 1px #e5e5e5;
      border: dashed 1px #e5e5e5;
      box-sizing: border-box;
      padding: 47px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 39px;

      .theDataItem {
        flex: 1;
        text-align: center;
        border-right: dashed 1px #e5e5e5;

        p:nth-of-type(1) {
          color: #222222;
          font-size: 26px;
          font-family: DINAlternate-Bold;
        }

        p:nth-of-type(2) {
          font-size: 14px;
          color: #888888;
          font-family: DINAlternate-Bold;
          padding-top: 3px;
        }
      }

      .theDataItem:last-child {
        border-right: none;
      }
    }
  }
  .wordBox {
    width: 100%;
    height: 256px;
  }
  // 目前没有可以查看的数据哟~
  .noDataNotice {
    font-size: 16px;
    color: #1779ff;
    text-align: center;
    line-height: 265px;
  }
}
</style>
